<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
    <table>
        <caption>用户注册</caption>
        <tr>
            <td>用户名：</td>
            <td><input type="text" id="username" onkeyup="checkUsername()"><span id="usernameMsg"></span></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="text" id="password"></td>
        </tr>
    </table>
    <button id="reg">注册用户</button>
</body>
<script>
    var action = false;

    $(function () {
        $("#reg").click(function () {
            if(action) {
                let username = $("#username").val();
                let password = $("#password").val();
                $.ajax({                    // 标准化模板，不用死记
                    // jquery中的任何属性名称，不能错误，并且一定区分大小写，所以建议在开发中，尽可能使用ctrl+c复制在修改
                    url:"/registerServlet",   // 请求路径
                    type:"post",            // 请求的方式，不区分大小写
                    async:true,             // 是否异步，true是默认值，false为同步请求
                    cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                    datatype:"json",        // 返回类型，text文本、html页面、json数据
                    data:{                  // 传递给后台参数名和参数值
                        username:username,
                        password:password
                    },
                    success:function(response){        // 如果后端响应成功，则会返回所有数据给到response对象中
                        console.log(response);
                        if(response.code === 200) {
                            alert(response.msg);
                            window.location.href="login.html";
                        }
                        else {
                            alert(response.msg);
                        }
                    },
                    error:function(response){          // 如果请求失败，则会执行error函数
                        alert("出错" + response);
                    }
                });
            }
            else {
                alert("用户名不合法");
            }
        });
    });
    
    function checkUsername() {
        let username = document.getElementById("username").value;
        $.ajax({                    // 标准化模板，不用死记
            // jquery中的任何属性名称，不能错误，并且一定区分大小写，所以建议在开发中，尽可能使用ctrl+c复制在修改
            url:"/checkUsernameServlet",   // 请求路径
            type:"post",            // 请求的方式，不区分大小写
            async:true,             // 是否异步，true是默认值，false为同步请求
            cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
            datatype:"json",        // 返回类型，text文本、html页面、json数据
            data:{                  // 传递给后台参数名和参数值
                username:username
            },
            success:function(response){        // 如果后端响应成功，则会返回所有数据给到response对象中
                console.log(response);
                let usernameMsgSpan = document.getElementById("usernameMsg");
                if(response.code == 200) {
                    usernameMsgSpan.innerHTML="<font color='green'>" + response.msg + "</font>";
                    action = true;
                }
                else {
                    usernameMsgSpan.innerHTML="<font color='red'>" + response.msg + "</font>";
                    action = false;
                }
            },
            error:function(response){          // 如果请求失败，则会执行error函数
                alert("出错" + response);
            }
        });
    }
</script>
</html>